import { combinationAdd, combinationList, combinationUpdate, packageList } from "@/services/chargingManage";
import { Button, Form, Input, message, Modal, Select, Table } from "antd";
import moment from "moment";
import React from "react";
import testData from "../resourceManage/testData";
import { formatMessage } from 'umi-plugin-react/locale';

class CombinationList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      list:[],
      total:0,
      loading:false,
      search:"",
      current:1,
      size:10,
      visible:false,
      id:null,
      packageList:[]
    }
  }

  componentDidMount(){
    this.getList()
  }

  getPackageList = async () => {
    const res = await packageList({current:1,size:999999})
    this.setState({packageList:res.records})
  }

  getList = () => {
    this.setState({loading:true},async () => {
      const { search ,current,size} = this.state
      const res = await combinationList({search ,current,size})
      this.setState({
        loading:false,
        list:res.records,
        total:res.total,
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getList()
    })
  }

  doCancel = () => {
    this.props.form.resetFields()
    this.setState({visible:false,id:null})
  }

  validateForm = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        this.doOk(values)
      }
    })
  }

  doOk = async values => {
    const { id,size } = this.state;
    let res = {}
    if(id){
      values.id = id
      res = await combinationUpdate(values)
    }else{
      res = await combinationAdd(values)
    }

    if(res.code == -1){}else{
      message.info(res.message)
      this.doCancel()
      this.doSearch(1,size)
    }
  }

  openModal = (row) => {
    this.setState({
      visible:true,
      id:row ? row.id : null
    },() => {
      this.getPackageList()
      if(row){        
        this.props.form.setFieldsValue({
          name:row.name,
          describeStr:row.describeStr,
          packageIds:row.packageIds ? row.packageIds.split(",") : []
        })
      }
    })
  }

  render(){
    const { search ,current,size,list,loading,total,visible,packageList} = this.state
    const { form:{getFieldDecorator} } = this.props;
    const columns = [
      {
        title: formatMessage({ id: 'chargingManage.packageManage.combinationList.packageCombinationName' }),
        dataIndex:'name',
        width:150
      },
      {
        title: formatMessage({ id: 'chargingManage.packageManage.combinationList.packageComposition' }),
        dataIndex:"preview",
        width:200
      },
      {
        title: formatMessage({ id: 'chargingManage.packageManage.combinationList.description' }),
        dataIndex:"describeStr",
        width:150
      },
      {
        title: formatMessage({ id: 'chargingManage.packageManage.combinationList.createDate' }),
        dataIndex:"createTime",
        width:150,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title: formatMessage({ id: 'chargingManage.packageManage.combinationList.operation' }),
        width:100,
        render:(text,row) => {
          return <Button type="primary" size="small" onClick={() => this.openModal(row)}>{formatMessage({ id: 'chargingManage.packageManage.combinationList.edit' })}</Button>
        }
      }
    ]

    return (
      <div>
        <div className="topOptionBox">
          <Input.Search placeholder={formatMessage({ id: 'chargingManage.packageManage.combinationList.searchPackageCombination' })} style={{width:200}} value={search} onChange={e => this.setState({search:e.target.value})} onSearch={() => this.doSearch(1,size)} />
          <Button type="primary" onClick={() => this.openModal()}>{formatMessage({ id: 'chargingManage.packageManage.combinationList.createPackageCombination' })}</Button>
        </div>

        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          scroll={{x:"auto"}}
          pagination={{
            current,
            pageSize:size,
            total,
            showQuickJumper:true,
            onChange:this.doSearch
          }}
        />

        <Modal
          title={formatMessage({ id: 'chargingManage.packageManage.combinationList.combinationPackage' })}
          visible={visible}
          onCancel={this.doCancel}
          onOk={this.validateForm}
          centered
        >
          <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
            <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.combinationList.packageName' })}>
              {getFieldDecorator("name",{rules:[{required:true,message: formatMessage({ id: 'chargingManage.packageManage.combinationList.pleaseInput' })}]})(
                <Input />
              )}
            </Form.Item>
            <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.combinationList.selectPackage' })}>
              {getFieldDecorator("packageIds",{rules:[{required:true,message:"请输入"}]})(
                <Select mode="multiple">
                  {
                    packageList.map(item => {
                      return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                </Select>
              )}
            </Form.Item>
            <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.combinationList.instruction' })}>
              {getFieldDecorator("describeStr")(
                <Input.TextArea autoSize={{minRows:8,maxRows:15}} />
              )}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

export  default Form.create()(CombinationList)